<template>
  <div>
    <van-button
      type="info"
      @click="columnsData.listShow = !columnsData.listShow"
      >选择列表</van-button
    >
    <selectList
      v-if="columnsData.listShow"
      :columnsData="columnsData"
      ref="selectList"
      @getCheckedValue="getCheckedValue"
      @handleList="handleList"
      @operationItem="operationItem"
    >
      <!-- 搜索插槽 -->
      <div slot="title">
        <van-search v-model="value" show-action placeholder="请输入搜索关键词">
          <template #action>
            <div @click="searchQuery">搜索</div>
          </template>
        </van-search>
      </div>
      <!-- 列表插槽 -->
      <!-- <div slot="head" slot-scope="{ item }">{{ item.createBy }}</div>
      <div slot="body" slot-scope="{ item }">{{ item.createBy }}</div>
      <div slot="label" slot-scope="{ item }">{{ item.createBy }}</div>
      <div slot="foot" slot-scope="{ item }">{{ item.createBy }}</div> -->
    </selectList>
    <div style="width: 80vw" v-if="ids">
      选择的列表ID：
      <p v-for="(item, index) in ids.split(',')" :key="index">{{ item }}</p>
    </div>
  </div>
</template>

<script>
import selectList from "@/components/pageList/selectList";
export default {
  components: { selectList },
  data() {
    return {
      ids: "",
      value: "",
      columnsData: {
        listShow: false, //控制列表选择显示
        title: "物品选择", //列表名称
        checkedShow: true, //列表是否支持多选
        operationTxt: "确定", //选择按钮名称
        listUrl: "sys/dict/list", //列表接口
        columns: {
          //列表是否使用插槽
          headSlot: false, //头部插槽
          bodySlot: false, //中间内容插槽
          labelSlot: false, //标签插槽
          footSlot: false, //底部插槽
          titleKey: "description", //标题
          subtitleKey: "description", //副标题
          content: [
            //内容
            {
              name: "测试1",
              key: ["dictCode", "dictCode", "dictCode", "dictCode"],
            },
            {
              name: "测试2",
              key: ["dictCode", "dictCode"],
            },
            {
              name: "测试3",
              key: ["dictCode", "dictCode"],
            },
            {
              name: "测试4",
              key: ["dictCode", "dictCode"],
            },
            {
              name: "测试3",
              key: ["dictCode", "dictCode"],
            },
            {
              name: "测试4",
              key: ["dictCode", "dictCode"],
            },
          ],
          labelKey: ["createBy", "dictName"], //标签
          peopleKey: "createBy", //流程发起人
          flowStatusNameKey: "dictName", //流程状态
          // 多种操作
          operation: [
            {
              name: "待确认",
              icon: require("../../assets/qd.png"),
              remarks:
                "说明是的撒的撒打算大撒的多撒点打算大撒多撒打算打算打算的的撒打算大撒",
            },
            {
              name: "编辑项目",
              icon: require("../../assets/diandian.png"),
              color: "#FF4D4F",
            },
            {
              name: "删除项目",
              icon: require("../../assets/diandian.png"),
              remarks: "这是说明啊啊啊",
              color: "#FF4D4F",
            },
            {
              name: "操作日期",
              icon: require("../../assets/diandian.png"),
            },
          ],
          // 固定且只有一个操作
          // operationText:'发起流程'
        },
      },
    };
  },
  created() {},
  methods: {
    // 搜索
    searchQuery() {
      let par = {
        value: this.value,
      };
      this.$refs.selectList.searchQuery(par);
    },
    // 重置
    searchReset() {
      this.$refs.selectList.searchReset();
    },
    //列表点击事件
    handleList(id, item, type) {
      console.log(id, item, type, "点击列表");
      this.ids = id;
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item, "确定");
      this.ids = ids;
    },
    // 更多操作事件
    operationItem(a, b) {
      console.log(a, b, "更多操作");
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  height: 100vh;
  overflow-y: scroll;
}
</style>